<template>
  <div class="container">
    <!--筛选表单-->
    <div class="tag-form">
      <el-form ref="roleform" label-width="80px" :inline="true" size="small">
        <el-form-item>
          <el-input v-model="query.role_name" placeholder="请输入描述" />
        </el-form-item>
        <el-form-item />
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="onSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
        <el-form-item class="add">
          <el-button icon="el-icon-plus" size="small" plain type="primary" @click="openDialog">创建</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表单列表 -->
    <div class="table-box">
      <el-table :data="roleList" border stripe>
        <!-- prop表示这一列展示哪个数据 -->
        <el-table-column prop="id" label="角色ID" width="150" />
        <el-table-column prop="role_name" label="角色名称" width="200">
          <template slot-scope="{row}">
            <el-tag type="success">{{ row.role_name }}</el-tag>
          </template>

        </el-table-column>
        <el-table-column prop="identify" label="角色标识" width="200" />
        <el-table-column prop="description" label="角色描述" width="400" />
        <el-table-column prop="created_at" label="添加时间" width="400" />
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="$refs.roleform.reviewInfo(row.id)"
            />&nbsp;&nbsp;&nbsp;
            <el-popconfirm title="确定删除吗" @onConfirm="delRole(row.id)">
              <el-button slot="reference" size="small" type="danger" icon="el-icon-delete" circle />
            </el-popconfirm>

          </template>
        </el-table-column>

      </el-table>
    </div>
    <!--分页区域-->
    <el-row class="page" align="middle" type="flex" justify="end">
      <!-- 三个变量（页码，总数，每页数），两个事件（每页数量切换 ，页码切换） -->
      <el-pagination
        :current-page.sync="query.page"
        :page-sizes="[ 6, 8, 10]"
        :page-size="query.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      >
        :pager-count="7">
      </el-pagination>
    </el-row>
    <RolePermissionVue ref="roleform" @updata="getRoleList" />
  </div>
</template>

<script>
import { getRoleListApi, delRoleInfoApi } from '@/api/permission/role'
import RolePermissionVue from './components/rolePermission.vue'
export default {
  components: { RolePermissionVue },
  data() {
    return {
      roleList: [], // 列表数据
      query: {
        role_name: '',
        page: 1,
        limit: 10
      },
      total: 0,
      isShow: false// 总数
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    // 请求列表数据
    async getRoleList() {
      const res = await getRoleListApi(this.query)
      this.roleList = res.list
      this.total = res.total
      console.log(res)
    },
    // 筛选表单
    onSearch() {
      this.getRoleList(this.query)
    },
    // 重置筛选
    // 重置所有筛选条件，并且在发送一次数据请求
    onReset() {
      this.query.page = 1
      this.query = {
        role_name: '',
        page: 1,
        limit: 10
      }
      this.getRoleList()
    },
    // 每页数量切换事件
    sizeChange(val) {
      this.query.limit = val
      this.getRoleList()
    },
    // 页码切换事件
    currentChange(val) {
      this.query.page = val
      this.getRoleList()
    },
    openDialog() {
      this.$refs.roleform.isShow = true
    },
    // 删除数据
    async delRole(id) {
      await delRoleInfoApi(id)
      this.$message.success('删除成功')
      this.getRoleList()
    }
  }
}
</script>

<style>
  .container{
     padding: 30px;
  }
.add{
  margin-left: 1550px;
}
</style>
